<template>
    <div class="memberManage">
        <Row v-show="prodQuery">
            <Form inline :label-width="90" class="search-form" style="margin-left:-10px;" @keydown.enter.native="handleSearch">
                <Form-item label="操作组名称">
                    <Select v-model="searchForm.groupName" clearable prefix="ios-home" style="width:250px">
                        <Option v-for="item in groupNameList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                        <Row style="text-align: center">
                            <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePageName" @on-page-size-change="changePageSizeName" simple />
                        </Row>
                    </Select>
                </Form-item>
                <Form-item style="margin-left:-45px;" class="br">
                    <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                    <Button @click="handleReset">重置</Button>
                </Form-item>
            </Form>
        </Row>
        <div>
            <rui-page :defines="defines" v-show="prodQuery">
                <rui-table :defineId="'defineDemo'"
                           @loadDatas="getGroupList"
                           :slots="[{key:'action',slot:'action'}]"
                           ref="defineDemoTable" :select="false">
                    <template slot="action" slot-scope="{ row }">
                        <div>
                            <Button @click="show(row)" size="small" type="primary">成员管理</Button>
                        </div>
                    </template>
                </rui-table>
            </rui-page>
        </div>
        <memberManage v-show="prodAdd" @back="show" :checkid="id">返回</memberManage>
    </div>
</template>

<script>
    import {getGroupInfo} from "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    import memberManage from "@/projects/afs-core-business/pages/case/parameter-rules/seats-manage/memberManage.vue";
    let defineDemo = [
        {
            key: 'serviceId',
            title: '流程编号',
            align: 'center',
        },
        {
            key: 'afsFlowKeyName',
            title: '流程名称',
            align: 'center',
        },
        {
            key: 'name',
            title: '操作组名称',
            align: 'center',
        },
        {
            key: 'action',
            title: '操作',
            align: 'center',
            slot: 'action'
        }
    ]
    export default {
        components: {
            memberManage
        },
        data() {
            return{
                prodQuery: true,
                prodAdd: false,
                id:"",
                departmentName:"",
                searchForm:{
                    pageNumber: 1,
                    pageSize: 10,
                    groupName: "",
                    id:""
                },
                groupNameList:[],
                total:0,
                pageNumber: 1,
                pageSize: 10,
            }
        },
        methods: {
            init(){
                this.getGroupList(1,10);
            },
            show(index){
                if(index!=undefined){
                    let str = JSON.stringify(index);
                    let groupInfo = JSON.parse(str);
                    this.searchForm = groupInfo;
                    this.id = groupInfo;
                }
                this.prodQuery = !this.prodQuery;
                this.prodAdd = !this.prodAdd;
                this.searchForm.groupName = "";
            },
            //条件搜索
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getGroupList(1,10);
            },
            //搜索重置
            handleReset() {
                this.searchForm.groupName = "";
                this.getGroupList(1,10);
            },
            getGroupList(pageNumber, pageSize){
                this.searchForm.pageNumber = pageNumber;
                this.searchForm.pageSize = pageSize;
                getGroupInfo(this.searchForm).then(res => {
                    if (res.code === "0000") {
                        self = res.data.records;
                        let {records, total} = res.data;
                        this.$refs.defineDemoTable.updateTableData(records, total);
                        this.groupNameList = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            changePageName(v) {
                this.pageNumber = v;
                this.getList();
            },
            changePageSizeName(v) {
                this.pageSize = v;
                this.getList();
            },
            getList(){
                let params = "";
                params = {pageNumber: this.pageNumber, pageSize: this.pageSize,};
                getGroupInfo(params).then(res=>{
                    if(res.code === "0000"){
                        this.groupNameList = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
        },
        computed: {
            defines() {
                return [
                    {
                        id: 'defineDemo',
                        fields: defineDemo
                    }
                ]
            }
        },
        //初始化
        mounted() {
            this.init();
        }
    }
</script>
<style>
    .memberManage .ivu-poptip{
        width: auto;
    }
</style>
